<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      title="客户详情"
      width="80%"
      placement="right"
    >
      <template #extra>
        <a-space wrap>
          <a-popconfirm
            title="是否要启用该用户?"
            ok-text="是"
            cancel-text="否"
            @confirm="accountEnableFn(detailsInfo.id)"
          >
            <a-button v-if="buinessState == 2" type="primary">启用</a-button>
          </a-popconfirm>
          <a-button
            v-if="buinessState == 1"
            @click="accountDisableFn(detailsInfo.id)"
            type="primary"
            danger
            >禁用</a-button
          >
        </a-space>
      </template>
      <a-card>
        <div class="header">
          <img :src="detailsInfo.avatarUrl" alt="" />
          <div>
            <div class="name">
              {{ detailsInfo.nickName }}
              <a-tag color="#f50" v-if="detailsInfo.isVip">VIP</a-tag>
              <a-tag color="#108ee9">{{ detailsInfo.vipLevel }}</a-tag>
            </div>
            <div class="time">注册时间：{{ detailsInfo.creatTime }}</div>
          </div>
        </div>
        <div class="tag">
          <a-tag color="red" style="width: 100%" v-if="buinessState == 2"
            >当前账号已被禁用。({{ detailsInfo.disableReason }})</a-tag
          >
        </div>
        <a-descriptions title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="用户账号">{{
            detailsInfo.username
          }}</a-descriptions-item>
          <a-descriptions-item label="性别">{{
            detailsInfo.gender == 1
              ? "男"
              : detailsInfo.gender == 2
              ? "女"
              : "未知"
          }}</a-descriptions-item>
          <a-descriptions-item label="出生日期">{{
            detailsInfo.birthday
          }}</a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card title="会员信息">
        <a-descriptions title="" :column="{ xxl: 5 }">
          <a-descriptions-item label="购买时间">{{
            detailsInfo.vipStartTime
          }}</a-descriptions-item>
          <a-descriptions-item label="累计优惠金额"
            >{{ detailsInfo.discountAmount }}元</a-descriptions-item
          >
          <a-descriptions-item label="累计优惠次数"
            >{{ detailsInfo.discountCount }}元</a-descriptions-item
          >
          <a-descriptions-item label="会员有效期"
            >{{ detailsInfo.vipStartTime }}~{{
              detailsInfo.vipArriveTime
            }}</a-descriptions-item
          >
          <a-descriptions-item label="会员权益">
            <template v-for="item in detailsInfo.vipRightsConfigList">
              <div></div>
            </template>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-row style="margin-top: 10px" :gutter="16">
        <a-col :span="12">
          <a-card title="账户信息">
            <div class="card-title">成长值</div>
            <p>
              当前成长: level
              <span style="color: #108ee9"> {{ detailsInfo.growthLevel }}</span>
            </p>
            <p style="display: flex">
              当前权益:
              <div style="display: flex;padding: 5px;;" v-for="item in growthRightsConfigListFn">
                <div>
                  <img style="width: 50px;" :src="item.coverPic" alt="">
                  <div style="color: #108ee9">{{ item.name }}</div>
                </div>
              </div>
            </p>
            <div class="card-title">积分</div>
            <p>
              当前账户积分:{{ detailsInfo.pointAvailableNum }} <span style="margin-left: 20px">累计使用积分：{{ detailsInfo.usedPointNum }}</span> <span style="margin-left: 20px">累计抵扣金额：{{ detailsInfo.deductionMoney }}</span>
            </p>
            <div class="card-title">优惠券</div>
            <p>
              未使用:{{ detailsInfo.availCouponNum }}张 <span style="margin-left: 20px">已使用：{{ detailsInfo.usedCouponNum }}张</span> <span style="margin-left: 20px">已过期：{{ detailsInfo.unAvailCouponNum }}张</span> <span style="margin-left: 20px;color:#108ee9;" @click="showBankCard" >查看></span>     
            </p>
            <div class="card-title">银行卡</div>
            <p>绑定银行卡：{{ detailsInfo.bankCards }}张 <span style="margin-left: 20px;color:#108ee9;" @click="showBankCard" >查看></span></p>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="用户行为">
            <p>累计消费金额：{{ detailsInfo.totalConsumption }}元</p>
            <p>累计消费次数：{{ detailsInfo.discountCount }}元</p>
            <p>客单价：{{ detailsInfo.unitValue }}</p>
            <p>关注商家：{{ detailsInfo.followShopNum }}</p>
            <p>关注品牌：{{ detailsInfo.followBrandNum }}</p>
            <p>心愿单：{{ detailsInfo.collectGoodsNum }}</p>
            <p>上次消费时间：{{ detailsInfo.lastConsumeTime }}</p>
            <p>上次登录时间：{{ detailsInfo.lastLoginTime }}</p>
          </a-card>
        </a-col>
      </a-row>
      <a-card>
        <a-tabs v-model:value="activeKey">
          <a-tab-pane key="1" tab="商品订单">
            <a-table
              :dataSource="
                detailsInfo.shopOrderDtoPage &&
                detailsInfo.shopOrderDtoPage.list
              "
              :columns="shopOrderDtoColumns"
              :pagination="pagination"
              @change="handleChangeSize"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'orderState'">
                  {{ orderStateEnum.getNameByValue(record.orderState) }}
                </template>
                <template v-if="column.key === 'action'">
                  <a-space>
                    <a-button @click="seeFunc(record.id)">查看</a-button>
                  </a-space>
                </template>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="售后订单">
            <a-table
              :dataSource="
                detailsInfo.shopOrderAfterDtoPage &&
                detailsInfo.shopOrderAfterDtoPage.list
              "
              :columns="shopOrderAfterDtoColumns"
              :pagination="pagination"
              @change="handleChangeSize"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'orderState'">
                  {{ afterStateEnum.getNameByValue(record.orderState) }}
                </template>
                <template v-if="column.key === 'action'">
                  <a-space>
                    <a-button @click="handleSee(record.id)">查看</a-button>
                  </a-space>
                </template>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-drawer>
    <cancelOrder ref="cancelOrderRef" @refreshList="refresh" />
    <!-- 查看 -->
    <!-- 订单详情 -->
    <goodsOrderInfo ref="goodsOrderInfoRef"></goodsOrderInfo>
    <!-- 售后详情 -->
    <afterSaleOrdersInfo ref="afterSaleOrdersInfoRef"></afterSaleOrdersInfo>
  </div>
</template>
<script setup>
import {
  getUserInfoDetail,
  settingSelf,
  accountEnable,
} from "@/api/userManger";
import { ref } from "vue";
import orderStateEnum from "@/enums/orderStateEnum.js";
import afterStateEnum from "@/enums/afterStateEnum.js";
import { message } from "ant-design-vue";
import cancelOrder from "./cancelOrder.vue";
import { shopOrderDtoColumns, shopOrderAfterDtoColumns } from "./columns";
import goodsOrderInfo from "../../orderManage/goodsOrderModule/goodsOrderInfo.vue";
import afterSaleOrdersInfo from "../../orderManage/afterSaleOrdersModule/afterSaleOrdersInfo.vue";
const modalOpen = ref(false);
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: (total) => `共 ${total} 条`,
});
const activeKey = ref(1);
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  id: undefined,
});
const buinessState = ref(undefined);
const open = (state, id) => {
  console.log(id);
  activeKey.value = 1;
  buinessState.value = state;
  modalOpen.value = true;
  formState.value.id = id;
  getShopUserInfoDetailInfo();
};
const detailsInfo = ref({});
const growthRightsConfigListFn = ref([])
const getShopUserInfoDetailInfo = async () => {
  const data = await getUserInfoDetail(formState.value);
  detailsInfo.value = data.data;
  growthRightsConfigListFn.value = data.data.growthRightsConfigList.filter(val => val.levelId == data.data.growthLevel)
};
function showBankCard() {

}
// 设为自营
const emits = defineEmits(["refreshList"]);
const settingSelfFn = async (id) => {
  const data = await settingSelf({ id });
  if (data.code === 200) {
    emits("refreshList");
    getShopUserInfoDetailInfo();
    message.success("设置成功");
  }
};
const goodsOrderInfoRef = ref(null);
const seeFunc = (id) => {
  goodsOrderInfoRef.value.seeFunc(id);
};
const afterSaleOrdersInfoRef = ref(null);
const handleSee = (id) => {
  afterSaleOrdersInfoRef.value.seeFunc(id);
};
// 启用
const accountEnableFn = async (id) => {
  const data = await accountEnable({ id });
  if (data.code === 200) {
    emits("refreshList");
    message.success("启用成功");
    getShopUserInfoDetailInfo();
    buinessState.value = 1;
  }
};
// 禁用
function refresh() {
  getShopUserInfoDetailInfo();
  emits("refreshList");
  buinessState.value = 2;
}
const cancelOrderRef = ref(null);
const accountDisableFn = async (id) => {
  cancelOrderRef.value.open(id);
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getShopUserInfoDetailInfo();
}
defineExpose({ modalOpen, open });
</script>
<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  > div {
    margin-left: 10px;
  }
}
.tag {
  margin-top: 10px;
  margin-bottom: 10px;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
</style>
